<template>
  <Row>
    <Col span="8">
        <Menu width="201px" @on-select="selectMenu" :open-names="['0']" accordion>
          <!-- <Avatar icon="ios-person" size="large" /> -->
          <div class="layout-nav">
            <Submenu :name="index" v-for="(menu, index) in menuList" :key="index">
              <template slot="title">
                <span :class="'iconfont '+menu.icon">{{menu.name}}</span>
              </template>
              <template v-if="menu.children.length>0">
                <MenuItem  :name="subMenu.name" v-for="(subMenu, index) in menu.children" :key="'sub_'+index">{{subMenu.name}}</MenuItem>
              </template>
            </Submenu>
          </div>
        </Menu>
    </Col>
  </Row>
</template>
<script>
import { mapMutations } from 'vuex'
export default {
  props: {
    menuList: Array  
  },
  methods: {
    ...mapMutations([
      'setBreadCrumb'
    ]),
    selectMenu(name) {
      this.$emit('getMenu', name)
      this.$router.push({name})
    }
  },
  watch: {
    '$route': function(newRoute){
      // 获得matched
      this.setBreadCrumb(newRoute.matched)
    }
  }
}
</script>


